<template>
  <div class="_cus_form-title-box">
    <div class="title-box">
      {{ title }}
    </div>
    <div v-if="$slots.default" class="content-box" :style="heightStyle">
      <slot />
    </div>
    <div class="open-all-btn" v-if="!!fold">
      <div v-if="isFold" @click="changeOpen">
        <span style="margin-right:6px">展开全部</span>
        <img src="~assets/image/form-title/up-down.png" width="13px" />
      </div>
      <div v-else @click="changeOpen">
        <span style="margin-right:6px">收起全部</span>
        <img src="~assets/image/form-title/up-down.png" width="13px" style="transform: rotate(180deg)" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FormTitle",
  props: {
    title: {},
    fold: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      isFold: !!this.fold
    }
  },
  computed: {
    heightStyle() {
      return { height: this.isFold ? this.fold + 'px' : 'auto' }
    }
  },
  methods: {
    changeOpen() {
      this.isFold = !this.isFold
    }
  }
};
</script>

<style scoped lang="scss" >
._cus_form-title-box {
  position: relative;
  margin-top: 13px;

  // padding-left: 8px;
  &+.form-title-box {
    margin-top: 30px;
  }

  .title-icon {
    position: absolute;
    left: 5px;
    top: 5px;
  }

  .title-box {
    color: #FFF;
    font-weight: 700;
    padding-left: 28px;
    font-size: 16px;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 6px;
      width: 12px;
      height: 10px;
      background: url('~assets/image/form-title/form-title-icon.png') no-repeat center center;
      background-size: 100%;
    }
  }

  .content-box {
    overflow: hidden;
    padding: 10px 5px 5px 5px;
  }

  .open-all-btn {
    color: #00A7F6;
    font-size: 14px;
    text-align: center;
    position: relative;
    cursor: pointer;
    --icon-width: 70px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(50%);
      width: var(--icon-width);
      height: 2px;
      background: url('~assets/image/form-title/open-button-icon.png') no-repeat center center;
    }

    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(50%);
      transform: rotate(180deg);
      width: var(--icon-width);
      height: 2px;
      background: url('~assets/image/form-title/open-button-icon.png') no-repeat center center;
    }
  }
}
</style>